<template>
  <!-- 标签栏 -->
  <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange" >
    <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key" ></van-tab>
  </van-tabs>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="true"
      finished-text="没有更多了"
      @load="load"
    >
      <!-- 商品卡片 -->
      <van-card
        v-for="(item, key) in list" 
        :key="key"
        :title="item.info.products.name"
        :thumb="item.info.products.thumbs_text"
        :num="item.info.pronum"
        :tag="item.status_text"
        @click-thumb="OrderInfo(item.id)"
        @click-num="OrderInfo(item.id)"
      >
        <template #title>
          <div class="title">订单号: {{ item.code }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.info.attrs">
          <van-tag v-for="(attr,index) in item.info.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
        </template>
        <template #desc v-else>
          <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
          <div class="price">下单时间：{{item.createtime_text}}</div>
        </template>

        <template #price>
          <div class="pricer">合计<em>￥</em>{{item.amount}}</div>
        </template>

        <template #footer>
          <!-- status = 1 仅退款 -->
          <van-button v-if="item.status == '1'" class="button" type="danger" size="small" @click="OrderRefund(item.id)">申请退款</van-button>

          <!-- status = 2 -->
          <van-button v-if="item.status == '2'" class="button" type="success" size="small" @click="OrderConfirm(item.id)">确认收货</van-button>

          <van-button v-if="item.status == '2'" class="button" type="warning" size="small" @click="OrderExpress(item.id)">物流详情</van-button>
          
          <!-- status = 3 已收货 -->
          <van-button v-if="item.status == '3' || item.status == '4'" class="button" type="warning" size="small" @click="OrderComment(item.id)">{{item.status == '3' ? '立即评价' : '查看评价'}}</van-button>

          <van-button class="button" type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>

          <hr />

        </template>
      </van-card>
    </van-list>
  </van-pull-refresh>

  <!-- 退款的弹框 -->
  <van-popup v-model:show="ApplyShow" position="bottom" closeable @closed="refresh">
    <van-form @submit="OrderApplyConfirm">
      <van-field
        v-model="remark"
        name="remark"
        rows="5"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入申请原因"
        show-word-limit
        :rules="[{ required: true, message: '请填写申请原因' }]"
      />
      <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交申请</van-button>
    </van-form>
  </van-popup>
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  
  //标签栏数据
  let StatusActive = ref('')
  let StatusList = ref([
    {title: '全部', value: ''},
    {title: '已支付', value: '1'},
    {title: '已发货', value: '2'},
    {title: '已收货', value: '3'},
    {title: '已完成', value: '4'},
    {title: '退货退款', value: '-1'},
  ])

  //下拉刷新的数据
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新

  // 申请仅退款
  let orderid = ref(0)
  let ApplyShow = ref(false)
  let remark = ref('')

  // 标签栏切换
  const TabChange = async ({ name }) => 
  {
    refreshing.value = true
    StatusActive.value = name
    refresh()
  }

  //下拉刷新
  const refresh = async () =>
  {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true

    load()
  }

  //加载数据方法 查询订单数据
  const load = async () =>
  {
    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }
    var params = {
      busid: proxy.$business.value.id,
      status: StatusActive.value,
      page:page.value
    }

    var result = await proxy.$POST({
      url: '/order/index',
      params
    })
    //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    if(result.code == 0)
    {
      //如果没有更多数据了 就说明已经加载到底了....
      finished.value = true
      return false
    }
    //数据修改
    result.data.map(item => {
      if(item.info && item.info.attrs)
      {
        item.info.attrs = JSON.parse(item.info.attrs)
      }else
      {
        item.info = {
          attrs: null,
          products: item.info.products,
          pronum:item.info.pronum
        }
      }
    })
    list.value = list.value.concat(result.data)
    page.value++

  }

  //跳转物流详情
  const OrderExpress = async (orderid) => proxy.$router.push({path: '/order/express', query: {orderid}})

  //跳转订单详情
  const OrderInfo = (orderid) => proxy.$router.push({path: '/order/info', query: {orderid}})

  //申请退款
  const OrderRefund = async (oid) => 
  {
    orderid = oid
    proxy.$confirm({
      message: '是否申请退款'
    }).then(async () => {
      ApplyShow.value  = true
    }).catch((e) => {
      console.log('用户取消退款')
      // refresh()
    })
  }
  //提交申请
  const OrderApplyConfirm = async (reason) =>
  {
    remark = String(reason.remark).trim()
    if(!remark)
    {
      proxy.$fail('申请原因不能为空')
      return false
    }

    var params = {
      busid: proxy.$business.value.id,
      remark,
      orderid
    }
    var result = await proxy.$POST({
      url: 'order/refund',
      params
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    // 退款申请成功
    proxy.$success('退款申请成功')
    ApplyShow.value = false
    remark = ''  // 清空备注
    refresh()  // 刷新订单列表
  }
  //确认收货
  const OrderConfirm = async (orderid) =>
  {
    proxy.$confirm({
      message:'是否确认收货'
    }).then(async () => {
      var result = await proxy.$POST({
        url: 'order/confirm',
        params: {
          busid: proxy.$business.value.id,
          orderid
        }
      })
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }
      
      refresh()

    }).catch((e) => {console.log('用户取消')})
  }

  //评价
  const OrderComment = async (orderid) => proxy.$router.push({path: '/order/comment', query: {orderid}}) 

</script>


<style scoped>
  @import url('/assets/css/OrderIndex.css');
  ::v-deep .van-card__num {
    transform: translateY(-40px);
  }

  ::v-deep .van-tab--grow {
    padding: 0;
  }
</style>
  